$tabs-prefix-cls: "#{$css-prefix}tabs";

.#{$tabs-prefix-cls} {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  color: $text-color;
  @include clearfix();

  &-bar {
    outline: none;
  }

  &-ink-bar {
    height: $tabs-ink-bar-height;
    box-sizing: border-box;
    background-color: $primary-color;
    position: absolute;
    left: 0;
    bottom: 1px;
    z-index: 1;
    transition: transform .3s $ease-in-out;
    transform-origin: 0 0;
  }

  &-bar {
    border-bottom: 1px solid $border-color-base;
    margin-bottom: $tabs-bar-margin-bottom;
  }
  &-bar-top{
    border-top: 1px solid $border-color-base;
    margin-bottom: $tabs-bar-top-margin-bottom;
    // margin-top: -1px;
  }
  &-nav-container {
    margin-bottom: -1px;
    line-height: $line-height-base;
    font-size: $font-size-base;
    box-sizing: border-box;
    white-space: nowrap;
    // overflow: hidden;
    position: relative;
    @include clearfix();
  }

  &-nav-container-scrolling {
    padding-left: $tabs-nav-container-scrolling-padding-left;
    padding-right: $tabs-nav-container-scrolling-padding-right;
  }
  &-return{
    float: left;
    height: $tabs-return-height;
    padding: $tabs-return-padding;
  }
  &-enter{
    float: right;
    height: $tabs-enter-height;
    padding:$tabs-enter-padding; 
  }
  &-return,&-enter:hover{
    cursor: pointer;
    i{
      color:$primary-color;
    }
  }
  &-nav-wrap {
    overflow: hidden;
    margin-bottom: -1px;
  }
  &-nav-wrap-width{
    width: $tabs-nav-wrap-width;
  }

  &-nav-scroll {
    position:relative;
    white-space: nowrap;
    overflow: hidden;
  }

  &-nav-right{
    display: inline-block;
    transition: transform 0.5s $ease-in-out;
  }

  &-nav {
    // position:absolute;
    display: inline-block;
    padding-left: 0;
    list-style: none;
    box-sizing: border-box;
    position: relative;
    transition: transform 0.5s $ease-in-out;

    &:before,
    &:after {
      display: table;
      content: " ";
    }

    &:after {
      clear: both;
    }

    .#{$tabs-prefix-cls}-tab {
      display: inline-block;
      height:$tabs-tab-height;
      padding:$tabs-tab-padding;
      margin-right:$tabs-tab-margin-right;
      box-sizing: border-box;
      cursor: pointer;
      text-decoration: none;
      position: relative;
      transition: color .3s $ease-in-out;

      font-family: MicrosoftYaHei;
      font-size:$tabs-tab-font-size;
      color: $tabs-nav-tab-color;
      letter-spacing: 0;
      text-align: left;
      line-height: $tabs-tab-line-height;

      &:hover {
          color: $tabs-tab-hover-color;
      }
      &:active {
          color: $tabs-tab-hover-color;
      }
      .#{$css-prefix-iconfont} {
          width: $tabs-tab-iconfont-width;
          height: $tabs-tab-iconfont-height;
          margin-right: $tabs-tab-iconfont-margin-right;
      }
      i{
        font-size: $tabs-tab-font-size;
      }
    }
    .#{$tabs-prefix-cls}-tab-disabled {
      pointer-events: none;
      cursor: default;
      
      font-family: MicrosoftYaHei;
      font-size: $tabs-tab-font-size;
      color: $tabs-tab-disabled-color;
      letter-spacing: 0;
      text-align: left;
      line-height: $tabs-tab-disabled-line-height;
    }



    .#{$tabs-prefix-cls}-tab-active {
      color:$tabs-tab-active-color;
    }
  }
  &-mini &-nav-container {
    font-size: $font-size-base;
  }

  &-mini &-tab {
    margin-right: 0;
    padding: $tabs-mini-tab-padding;
    font-size: $font-size-small;
  }

  & {
    .#{$tabs-prefix-cls}-content-animated {
      display: flex;
      flex-direction: row;
      will-change: transform;
      transition: transform .3s $ease-in-out;
    }

    .#{$tabs-prefix-cls}-tabpane {
      flex-shrink: 0;
      width: 100%;
      transition: opacity .3s;
      opacity: 1;
    }

    .#{$tabs-prefix-cls}-tabpane-inactive {
      opacity: 0;
      height: 0;
    }
  }

  // card style
  &.#{$tabs-prefix-cls}-card > &-bar &-nav-container,&.#{$tabs-prefix-cls}-card-top > &-bar-top &-nav-container {
      height: $tabs-card-bar-top-nav-container-height;
  }
  &.#{$tabs-prefix-cls}-card-top > &-bar-top &-nav-container {
    margin-top:-1px;
    margin-bottom: 0px;
  }
  &.#{$tabs-prefix-cls}-card > &-bar &-ink-bar,&.#{$tabs-prefix-cls}-card-top > &-bar-top &-ink-bar {
      visibility: hidden;
  }
  &.#{$tabs-prefix-cls}-card > &-bar &-tab, &.#{$tabs-prefix-cls}-card-top > &-bar-top &-tab{
      margin:$tabs-card-bar-top-tab-margin;
      margin-right: $tabs-card-bar-top-tab-margin-right;
      height: $tabs-card-bar-top-tab-height;
      padding: $tabs-card-bar-top-tab-padding;
      border: 1px solid $border-color-base;
      border-bottom: 0;
      border-radius: $btn-border-radius $btn-border-radius 0 0;
      transition: all 0.3s $ease-in-out;
      background: $table-thead-bg;
  }
  &.#{$tabs-prefix-cls}-card-top > &-bar-top &-tab{
    border-bottom: 1px solid $border-color-base;
    border-radius: 0 0 $btn-border-radius $btn-border-radius;
  }
  &.#{$tabs-prefix-cls}-card > &-bar &-tab-active {
      height: $tabs-card-bar-tab-active-height;
      padding-bottom:$tabs-card-bar-tab-active-padding-bottom;
      background: $tabs-bar-active-background;
      transform: translateZ(0);
      border-color: $tabs-bar-active-border-color;
      color:$tabs-bar-active-color;
  }
  &.#{$tabs-prefix-cls}-card-top > &-bar-top &-tab-active{
    height: $tabs-card-top-bar-top-tab-active-height;
    padding-bottom:$tabs-card-top-bar-top-tab-active-padding-bottom;
    background: $tabs-card-top-bar-top-tab-active-background;
    transform: translateZ(0);
    border-color: $border-color-base;
    color: $primary-color;
    border-top:1px solid transparent;
  }
  &.#{$tabs-prefix-cls}-card > &-bar &-nav-wrap {
      margin-bottom: 0;
  }
  &.#{$tabs-prefix-cls}-card > &-bar &-tab .#{$css-prefix-iconfont}-ios-close-empty,&.#{$tabs-prefix-cls}-card-top > &-bar-top &-tab .#{$css-prefix-iconfont}-ios-close-empty {
      width: $tabs-card-bar-tab-ios-close-empty-width;
      height: $tabs-card-bar-tab-ios-close-empty-height;
      font-size:$tabs-card-bar-tab-ios-close-empty-font-size;
      margin-right:$tabs-card-bar-tab-ios-close-empty-margin-right;
      color: $legend-color;
      text-align: right;
      vertical-align: middle;
      overflow: hidden;
      position: relative;
      top: -1px;
      transform-origin: 100% 50%;
      transition: all 0.3s $ease-in-out;
      &:hover {
        color: $tabs-card-bar-tab-ios-close-empty-hover-color;
      }
  }

  &.#{$tabs-prefix-cls}-card > &-bar &-tab-active .#{$css-prefix-iconfont}-ios-close-empty,
  &.#{$tabs-prefix-cls}-card > &-bar &-tab:hover .#{$css-prefix-iconfont}-ios-close-empty,
  &.#{$tabs-prefix-cls}-card-top > &-bar-top &-tab-active .#{$css-prefix-iconfont}-ios-close-empty,
  &.#{$tabs-prefix-cls}-card-top > &-bar-top &-tab:hover .#{$css-prefix-iconfont}-ios-close-empty {
    ssform: translateZ(0);
  }
  &-panel-right{
    width:100%;
    .#{$tabs-prefix-cls}-content-animated {
      display: flex;
      flex-direction: column;
      will-change: transform;
      transition: transform .3s $ease-in-out;
    }
  }
  &-bar-right{
    float:left;
  }
  &-content-right{
    float:left;
    border-left:1px solid $border-color-base;
    .h-tabs-tabpane{
      padding:10px 20px;
    }
  }
  &-nav-right{
    padding-top:$tabs-nav-right-padding-top;
    padding-right:$tabs-nav-right-padding-right;
    .h-tabs-tab{
      width:$tabs-nav-right-tabs-tab-width;
      height:$tabs-nav-right-tabs-tab-height;
      line-height:$tabs-nav-right-tabs-tab-line-height;
      text-align:right;
      position:relative;
      padding: $tabs-nav-right-tabs-tab-padding;
      i{
        color:transparent;
        position: absolute;
        right:0px;
        margin-right:$tabs-nav-right-tabs-tab-i-margin-right;
      }
    }
    .h-tabs-tab-alginleft{
      text-align:left;
    }
    .h-tabs-tab:hover{
      background:$border-color-base;
      cursor:pointer;
      i{
        color:$border-color-base;
      }
    }
    .h-tabs-tab-active{
      background:$primary-color;
      color:$tabs-tab-nav-right-active-color;
      font-weight:bold;
      i{
        color:$primary-color;
      }
    }
    .h-tabs-tab-active:hover{
      background:$primary-color;
      i{
        color:$primary-color;
      }
    }
  }
}

.#{$tabs-prefix-cls}-no-animation{
  > .#{$tabs-prefix-cls}-content {
    transform: none!important;

    > .#{$tabs-prefix-cls}-tabpane-inactive {
      display: none;
    }
  }
}